<template>
    <div class="frame">
        <div style="margin: auto;">
            <img src="./images/abcd.jpg" alt="">
        </div>
        <div style="margin: auto;">
            <el-row>
                <span class="y"></span>
                <span class="u"></span>
                <span class="n"></span>
            </el-row>
            <el-row>
                <span class="f"></span>
                <span class="e"></span>
                <span class="n"></span>
                <span class="g"></span>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.frame {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
}

span {
    display: inline-block;
    background: url(./images/abcd.jpg) no-repeat;
    overflow: hidden;
}

.e {
    width: 100px;
    height: 114px;
    background-position: -482px 0px;
}
.f {
    width: 95px;
    height: 114px;
    background-position: 0px -138px;
}
.g {
    width: 110px;
    height: 114px;
    background-position: -95px -138px;
}

.p {
    width: 100px;
    height: 112px;
    background-position: -493px -276px;
}

.i {
    width: 60px;
    height: 108px;
    background-position: -327px -142px;
}

.n {
    width: 108px;
    height: 109px;
    background-position: -215px -141px;
}

.k {
    width: 105px;
    height: 114px;
    background-position: -495px -142px;
}
.u {
    width: 112px;
    height: 114px;
    background-position: -475px -420px;
}
.y {
    width: 112px;
    height: 114px;
    background-position: -365px -555px;
}
</style>
